<template>
  <div class="StringFormation">
    <div class="leftbox">
      <CheckTree @handClick="handClick" @chushihua="chushihua" ref="CheckTree"></CheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="40px">
            <el-row :gutter="20">
                <el-col :span="5">
                  <el-form-item label="日期">
                    <el-date-picker  v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="19" style="text-align: right;">
                  <el-form-item label="">
                     <el-button size="small" @click="chongzhi">重 置</el-button>
                     <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="rightbodybo">
        <div class="title">
          <div>逆变器组串分析</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="elebo">
          <div class="dianya">
            <div class="titles" style="margin-bottom: 10px;">
              <div class="text">电压(V)</div>
              <div>
                <i :style="{color:isshow?'#007cee':''}" @click="yatoimg" class="iconfont icon-zhuzhuangtutubiao"></i>
                <i :style="{color:!isshow?'#007cee':''}" @click="yatotab" class="iconfont icon-biaoge"></i>
              </div>
            </div>
            <div class="dianyatubiao" ref="dianyatubiao" v-show="isshow"></div>
            <div class="dianyatubiao" v-show="!isshow">
              <TableColumn
                ref="tabledatadianya"
                :tableData="tableData" 
                :tableConfig="tableConfig" 
                :issize="issize">
                <el-table-column
                v-for="(item,index) in 16"
                :key="100*item"
                  :prop="'Pv'+(index+1)+'电压'"
                  width="100"
                  align="right"
                  :label="'Pv'+(index+1)+'电压'">
                </el-table-column>
              </TableColumn>
            </div>
          </div>
          <div class="dianya">
            <div class="titles" style="margin: 10px 0;">
              <div class="text">电流(A)</div>
              <div>
                <i :style="{color:isshows?'#007cee':''}" @click="liutoimg" class="iconfont icon-zhuzhuangtutubiao"></i>
                <i :style="{color:!isshows?'#007cee':''}" @click="liutotab" class="iconfont icon-biaoge"></i>
              </div>
            </div>
            <div class="dianliutubiao" ref="dianliutubiao" v-show="isshows"></div>
            <div class="dianliutubiao" v-show="!isshows">
              <TableColumn
                ref="tabledatadianliu"
                :tableData="tableDatas" 
                :tableConfig="tableConfigs" 
                :issize="issize">
                <el-table-column
                v-for="(item,index) in 16"
                  :prop="'Pv'+(index+1)+'电流'"
                  width="100"
                  :key="100-index"
                  align="right"
                  :label="'Pv'+(index+1)+'电流'">
                </el-table-column>
              </TableColumn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ColorList} from '@/utils/array'
import {getdianyaquxianapi,getdianyalistapi,getdianliuquxianapi,getdianliulistapi} from '@/api/Photovoltaic/analysis/StringFormation'
import CheckTree from '../component/CheckTree.vue'
import * as echarts from 'echarts';
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    CheckTree
  },
  data() {
    return {
      issize: 'medium',
      value1: '',
      isshow: true,
      isshows: true,
      tableData:[],
      tableDatas: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        {label:'时间',prop:'date',center: 'center', width: '170'},
        { label: '电站', prop: 'stationName' ,},
        { label: '逆变器', prop: 'inverterName' },
      ],
      tableConfigs: [
      { label: '序号', type: 'index', center: 'center', width: '70' },
        {label:'时间',prop:'date',center: 'center', width: '170'},
        { label: '电站', prop: 'stationName' ,},
        { label: '逆变器', prop: 'inverterName', center: 'right'  }
      ],
      threelist:[],
      dianyaloading:null,
      dianliuloading: null,
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    chushihua(val) {
      this.handClick(val)
    },
    // 树节点点击
    handClick(val) {
      this.threelist = val
      console.log(this.threelist);
      if (this.threelist.length) {
        this.gettablelist()
      } else {
        this.tableData = []
        this.tableDatas = []
        this.getdianyaech([])
        this.getdianliuech([])
      }
    },
    // 获取数据
    gettablelist() { 
      if(!this.threelist.length) return this.$message.warning('请先选择数据')
      this.dianyalist()
      this.dianliulist()
    },
    // 获取电流数据
    async dianliulist() {
      const contrastString =[]
      this.dianliuloading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: this.$refs.dianliutubiao
      });
      this.$refs.tabledatadianliu.loading = true
      this.threelist.map(ele => contrastString.push(ele.id))
      const { data: { list } } = await getdianliuquxianapi({
        contrastString:contrastString.join(','),dateString:this.value1
      })
      this.getdianliuech(list)
      const res = await getdianliulistapi({
        contrastString:contrastString.join(','),dateString:this.value1,classId:this.threelist[0].name
      })
      res.data.list.forEach(ele => {
         ele.inverterVoltageList.map(item =>{
             ele[item.name] = item.value
         })
      })
      this.tableDatas = res.data.list
      this.$refs.tabledatadianliu.loading=false
    },
    // 获取电压数据
    async dianyalist() {
      const contrastString =[]
      this.dianyaloading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: this.$refs.dianyatubiao
      });
      this.$refs.tabledatadianya.loading=true
      this.threelist.map(ele =>contrastString.push(ele.id) )
      const { data: { list } } = await getdianyaquxianapi({
        contrastString:contrastString.join(','),dateString:this.value1
      })
      this.getdianyaech(list)
      const res = await getdianyalistapi({
        contrastString:contrastString.join(','),dateString:this.value1,classId:this.threelist[0].name
      })
       res.data.list.forEach(ele => {
         ele.inverterVoltageList.map(item =>{
             ele[item.name] = item.value
         })
       })
      this.tableData = res.data.list
      this.$refs.tabledatadianya.loading=false
    },
    // 重置
    chongzhi() { 
      this.gettime()
      this.gettablelist()
    },
    // 获取电压图表
    getdianyaech(list) {
      var chartDom = this.$refs.dianyatubiao
      var myChart = echarts.init(chartDom);
      var option;
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      const series = list.map(ele => {
        return {
            name: ele.name,
          type: 'line',
          smooth: true,
            data:ele.datalist.map(ele=>ele.valueReading)
          }
      })
      option = {
        color:ColorList,
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        grid: {
          left: '2%',
          top:'15%',
          right: '1%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timePoints
        },
        yAxis: {
          type: 'value',
          name:'(V)',
          axisLine: {
            show:true
          },
        },
        series: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      this.dianyaloading?.close()
    },
    // 获取电流图表
    getdianliuech(list) {
      var chartDom = this.$refs.dianliutubiao
      var myChart = echarts.init(chartDom);
      var option;
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      const series = list.map(ele => {
        return {
            name: ele.name,
          type: 'line',
          smooth: true,
            data:ele.datalist.map(ele=>ele.valueReading)
          }
      })
      option = {
        color:ColorList,
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        grid: {
          left: '2%',
          right: '1%',
          top:'15%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timePoints
        },
        yAxis: {
          type: 'value',
          name:'(A)',
          axisLine: {
            show:true
          },
        },
        series: series
      };
      myChart.clear();
      option && myChart.setOption(option);
      this.dianliuloading?.close()
    },
    yatoimg(){
      this.isshow=true
    },
    yatotab(){
      this.isshow=false
    },
    liutoimg(){
      this.isshows=true
    },
    liutotab() {
      this.isshows=false
    },
         // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      const contrastString=[]
      this.threelist.map(ele =>contrastString.push(ele.id) )
      exportexcel('pes-microservice-biz/pes/inverter/strings/analyse/voltage/export',{
        contrastString:contrastString.join(','),dateString:this.value1,classId:this.threelist[0].name
      }, '逆变器组串分析-电压')
      exportexcel('pes-microservice-biz/pes/inverter/strings/analyse/current/export',{
        contrastString:contrastString.join(','),dateString:this.value1,classId:this.threelist[0].name
      },'逆变器组串分析-电流')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value1',year+'-'+month+'-'+day)
    },
  },
};
</script>

<style scoped>
.StringFormation{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    height: 100%;
    margin-right: 10px;
    background-color: #fff;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
      .righttop{
        height: 80px;
        padding: 20px;
        background-color: #fff;
        margin-bottom: 10px;
      }
    .rightbodybo{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .title{
        margin-bottom: 10px;
        display:flex;
        justify-content:space-between;
      }
      .elebo{
        height: 95%;
        .dianya{
          height: 50%;
          .titles{
            display: flex;
            justify-content: space-between;
            i{
              font-size: 18px;
              margin-left: 15px;
            }
            i:hover{
              color: #1890ff;
              cursor:pointer ;
            }
            .text{
              color: #000;
            }
          }
          .dianyatubiao, .dianliutubiao{
            height: 92%;
          }
        }
      }
    }
  }
}
</style>